Skip to main content

반응형 이미지

해상도 전환(resolution switching)​

  • 크기만 다른 동일한 이미지를 보여주고 싶을 때 사용하는 방법
  • 화면에 어울리지 않게 일부러 큰 이미지를 사용하여 낭비를 하거나, 작은 사이즈의 이미지를 확대하는 것은 좋지 않다.
  • 해상도 전환은 다양한 스크린, 다바이스에서 보유주기 위한 방법
  • 해결방법: 1. 벡터 그래픽 이미지 사용, 2. <img>요소에 srcset와 sizes 속성 이용

srcset​

srcset = "./img/screen1.png 360w",
        "./img/screen2.png 600w"

        /* 이미지 경로 + 공백 + 고육 픽셀 너비 작성 */
        /* 같은 비율의 다양한 이미지 크기를 가지는 동일 이미지들이 최소 2개 이상 명시하는 속성 */
        /* pw 단위가 아닌 w,x를 사용 */

w 서술자​

  • 이미지의 원본 넓이를 브라우저에게 알려줌
  • w서술자가 적용되면 이미지 크기는 뷰포트의 100%를 차지(width, sizes 등 속성으로 변경 가능)
  • w 서술자를 사용한 경우 src 속성을 무시(만약 srcset 속성이 사용 불가능한 브라우저일 경우 대비해서 src를 작성)

x 서술자​

  • 화소의 밀도, 디바이스 화소 밀도에 따른 이미지를 로딩하도록 브라우저에게 알려줌
  • 화소밀도(pixel density)
    • 동일한 면적에 들어가는 화소의 수
    • 화소의 갯수가 많을 수록 더 높은 해상동의 기기
  • 서술자를 포함하지 않은 경우 기본값인 1x로 간주
  • w,x는 동시에 사용이 불가능하다.

같은 크기, 다른 해상도: srcset와 서술자 사용(크기와 해상도는 다르다.)​

  • 모두가 이미지를 실제 사이즈로 동일하게 봐야 할 때 x 서술자를 이용하여 브라우저에 적절한 이미지를 선택
info

srcset은 브라우저에게 이미지 선택권을 위임하는 속성
srcset 속성은 원하는 이미지를 선택 및 강제할 수 없다.
브라우저 자체가 상황에 맞게 이미지를 선택해준다.
만약 해상도에 맞게 출력할 결과를 정하고 싶다면 CSS에서 @media를 이용하면 된다.

sizes​

  • 미디어 조건문이 true일 경우, 이미지가 차지하게 될 사이즈를 브라우저에게 알려준다.(px,em,vw 사용가능 %는 사용 불가능)
  • 미디어 조건문이 없는 마지막 줄은 앞의 조건문 값이 false일 경우에 동작한다.
  • srcset이 비어있거나 너비 서술자를 사용하지 않으면 효과가 없다.
  • size와 width를 같이 작성할 경우 width를 우선
danger

CSS 충돌 주의 size 속성을 사용할 때, CSS를 통한 이미지의 사이즈를 컨트롤 하는 방법과 충돌할 수 있다.

아트 디렉션(art direction)​

  • 연출방향, 중요한 부분을 자른 이미지를 보여주는 것
  • 반응형 이미지에서 이미지의 의도가 제대로 전달되도록 기기에 따라 사진의 핵심을 확대하는 방법
  • 다른 비율, 다양한 크기의 이미지를 사용할 때 사용

<picture> 요소 사용하기​

<picture>
  <source media="(min-width: 1024px)" srcset="/img/lication-chilli.png" />
  <source media="(max-width: 1023px)" srcset="/img/lication-chilli2.png" />
  <img src="lication-chilli.png" alt="위니브 리케이션 속 칠리" />
</picture>
/* Viewport 혹은 width의 설정에 따라 1024이상이면 chilli 1023이하라면 chilli2가
적용 */

<source>​

  • 브라우저가 고려하여 가장 적합한 요소를 선택. 일치하지 않거나 브라우저가 <picture>요소를 지원하지 않으면 <img>요소를 선택

  • type

    • <source> 요소의 srcset 속성에 있는 URL에 대한 MIME 유형을 지정

  • media

    • 아트 디렉션에만 사용
    • 미디어를 사용한다면 sizes 속성 내에 제공해서는 안된다.

<img>​

  • src, alt 속성 포함
  • <source> 요소 중 사용가능한 이미지가 없을 경우 해당 이미지로 적용

이미지 포맷 종류​

  • GIF(Graphics Interchange Format): 256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적다.
    • 투명 표현, 애니메이션 처리 가능
    • 투명 조절, 그림자 표현 불가능
  • JPG/JPEG(Joint Photographic Expert Group image): 매우 화소가 높고, 용량도 적지만 투명처리가 불가능
  • PNG(Portable Network Graphics): 컬러는 모두 표현 가능하며, 투명 영역을 처리 가능하지만 용량이 큼.
  • SVG(Scalable Vector Graphics): 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능.
  • WebP(Web Picture Format): JPEG보다 압축률이 더 좋고 뛰어난 색상을 지원.
    • 투명도 표현 가능, 애니메이션 표현 가능.
  • AVIF(AV1 Image File Format): 뛰어난 색상표현, 애니메이션 처리, 투명도 표현 가능 용량도 JPEG의 50% 수준. 현재 지원하지 않는 브라우저가 많다.

반응형 이미지 만드는 방법​

  • width: 100%
  • max-width: 100%